<template>
  <div class="projectList xzq-list-div">
    <el-form ref="form"  label-width="160px" style="border: 1px solid #ddd; padding: 10px;">
      <el-row>
        <el-col :span="21">
          <el-form-item label="行政区数据服务地址:">
            <el-input v-model="config.urlStr" @input="change($event)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="margin-left: 10px;">
          <el-button type="primary" @click="LoadDataSourcesSelect">读取</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="数据源:">
            <el-select v-model="selectedDatasource" @change="LoadDatasetsSelect(selectedDatasource)" style="width: 100%;">
              <el-option
                v-for="item in config.datasourceNames"
                :key="item.value"
                :value="item.value"
                :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="数据集:">
            <el-select v-model="selectedDataset" @change="LoadFieldsTable(selectedDatasource,selectedDataset)" style="width: 100%;">
              <el-option
                v-for="item in config.datasetNames"
                :key="item.value"
                :value="item.value"
                :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="代码字段:">
            <el-select v-model="selectedField" style="width: 100%;">
              <el-option
                v-for="item in config.fieldNames"
                :key="item.value"
                :value="item.value"
                :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="margin-left: 10px;">
          <el-button type="primary" @click="saveXzqDataservice">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getXzqService, updateXzqService } from '@/api/resource/xzqService'

export default {
  name: 'xzqList',
  data() {
    return {
      selectedDatasource: "",
      selectedDataset: "",
      selectedField: "",
      defaultFieldList: ['SMID', 'SMX', 'SMY', 'SMSDRIW', 'SMSDRIN', 'SMSDRIE', 'SMSDRIS', 'SMUSERID', 'SMAREA', 'SMLENGTH', 'SMTOPOERROR',
        'SMPERIMETER', 'SMGEOMETRYSIZE', 'SMGEOPOSITION', 'SMGEOTYPE', 'SMLIBTILEID', 'SMGEOMETRY'],
      config: {
        urlStr: '',   //双向绑定
        serviceQueryData: null,  //服务查询数据
        datasourceNames: [],
        datasetNames: [],
        fieldNames: [],
        fieldData: [],
      },
    }
  },
  mounted() {
    this.XzqServiceQueryDataAjax();
  },
  methods: {
    /*后台请求*/
    XzqServiceQueryDataAjax: function (params) {
      let that = this;
      that.config = {};
      getXzqService().then((res) => {
        let queryData = res.data.queryData;   //这个地方要注意
        if (queryData.length > 0) {

          let obj = queryData[0];  //先默认第一个，后续的都是实时查询
          that.config.urlStr = obj.url;
          that.config.datasourceNames = [{"name": obj.datasource, "value": obj.datasource}];
          that.config.datasetNames = [{"name": obj.dataset, "value": obj.dataset}];
          that.config.fieldNames = [{"name": obj.field, "value": obj.field}];
          that.$forceUpdate();  //对象和数组应该用push的情况
          //初始化选择  后期考虑要不要放在这里
          that.selectedDatasource= that.config.datasourceNames[0]["value"];
          that.selectedDataset=  that.config.datasetNames[0]["value"];
          that.selectedField=  that.config.fieldNames[0]["value"];
        }
      }).catch((error) => {
        // catch 指请求出错的处理
        console.log(error);
      });
    },

    /*数据源读取*/
    LoadDataSourcesSelect() {
      let that = this;
      if (that.config.urlStr) {
        let readDatasources = new ol.supermap.DatasourceService(that.config.urlStr).getDatasources(function (datasourceResult) {
          let datasourceNames = datasourceResult.result.datasourceNames;
          that.config.datasourceNames = [];
          that.selectedDatasource= "";
          that.$forceUpdate();
          for (let i in datasourceNames) {
            let datasourceName = datasourceNames[i];
            that.config.datasourceNames.push({"name": datasourceName, "value": datasourceName});
          }
          //更新数据源
        });
      }
    },

    /*数据集读取*/
    LoadDatasetsSelect(datasource) {
      let that = this;
      if (that.config.urlStr&&datasource) {
        let readDatasets = new ol.supermap.DatasetService(that.config.urlStr).getDatasets(datasource, function (datasetResult) {
          let datasetNames = datasetResult.result.datasetNames;
          that.config.datasetNames = [];
          that.selectedDataset="";
          that.$forceUpdate();

          for (let i in datasetNames) {
            let datasetName = datasetNames[i];
            that.config.datasetNames.push({"name": datasetName, "value": datasetName});
          }
        });
      }
    },
    /*字段读取*/
    LoadFieldsTable (datasource, dataset) {
      let that = this;
      that.config.fieldNames=[];
      that.selectedField="";
      that.$forceUpdate();

      if (that.config.urlStr&&datasource&&dataset) {
        let readFields = new ol.supermap.FieldService(that.config.urlStr).getFields(new SuperMap.FieldParameters({
          datasource: datasource,
          dataset: dataset
        }), function (fieldResult) {

          let fields = fieldResult.result.fieldNames;
          for (let i in fields) {
            let field = fields[i];
            let isVisible = 1;
            if (that.inArray(field.toUpperCase(), that.defaultFieldList) >= 0) {
              isVisible = 0;
            }
            that.config.fieldNames.push({"name": field, "value": field});
          }
          that.$forceUpdate();
        });
      }
    },

    /*判断要素是否在数组中*/
    inArray(str, _array) {
      let isInArray = -1;
      for (let i = 0; i < _array.length; i++) {
        const element = _array[i];
        if (element===str) {
          isInArray = i;
          break;
        }
      }
      return isInArray;
    },

    /*保存*/
    saveXzqDataservice(){
      let that =this;
      let dataurl=that.config.urlStr;
      let datasource = that.selectedDatasource;
      let dataset = that.selectedDataset;
      let field = that.selectedField;
      let purpose = 'analysis';

      if(dataurl&&datasource && dataset && field){
        let param = {
          "url": dataurl,
          "datasource": datasource,
          "dataset": dataset,
          "field": field,
          "purpose": purpose
        };
        updateXzqService(param).then((res) => {
          alert("code:" + res.code + ",msg:" + res.msg);
        }).catch(resp => {
          console.log('queryDict', resp.status + "," + resp.statusText);
        });
      }
    },
    /*输入框强制绑定*/
    change(){
      this.$forceUpdate();
    },

  },//methods
}
</script>

<style scoped>
.xzq-list-div .xzq-dataservice-div {
  padding: 5px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.xzq-list-div .layui-inline {
  margin-right: 0px;
}

.xzq-list-div .layui-form-item {
  margin-bottom: 0px;
}

.xzq-list-div .layui-form-label {
  width: 180px;
}

.xzq-list-div .layui-input-block {
  margin-left: 180px;
}
</style>
